import React from 'react';
import { inject, observer } from "mobx-react";
import { Icon, Row, Tree , Button, message} from 'antd'
import {WeaInput, WeaLocaleProvider,WeaDialog,WeaCheckbox} from 'ecCom'
import { routerShape } from 'react-router';
import {toJS} from 'mobx';
import GoalAdd from '../GoalAdd';
import * as Util from "../../../util/Util";
import ViewTree from '../../../public/viewtree/ViewTree';
const getLabel = WeaLocaleProvider.getLabel;
@inject("goalDetailStore","goalCommonStore")
@observer
export default class GoalSubGoal extends React.Component{
    static contextTypes = {
        router: routerShape
    }
    constructor(props){
        super(props);
        this.state = {
            ...props,
            goalName:'',
        }
    }

    componentWillMount() {//一些初始化请求
        this.props.onRef(this)//关联父组件
    }

    componentDidMount(){
        const { goalDetailStore } = this.props;
        goalDetailStore.loading = false;
    }

     //新增目标
     onAddGoal(type,v,params){
        const {goalDetailStore,goalCommonStore,sortcond} = this.props;
        const {detailData,detailKey} = goalDetailStore;
        const {typeId,orgId,condtype} = goalCommonStore;
        this.resetUrlKey()
        if(type==1){ //新建子目标
            goalDetailStore.setParentData({id:detailKey,name:detailData.name})
            goalCommonStore.setCreatevisable(true)
        }else if(type == 2){  //右侧新建
            goalCommonStore.setCreatevisable(true)
        }else{   //快速新建目标
            if(Util.isBlank(v)){
                return;
            }
            this.setState({
                goalName:''
            })
            goalDetailStore.addGoal({goalName:v,parentid:detailKey,sorttype:sortcond,cate:detailData.cateid,condtype,typeId,orgId,doback:(data)=>{
                this.onCallBackSuccess(data);
            }})
        }
    }

     //弹出层  新增页面回调成功
    onCallBackSuccess(optparams,data){
        if (typeof this.props.doCallBack === "function") {
            this.props.doCallBack(null,optparams,data);
        }
    }

    onIconClick = (key) => {
        const { goalDetailStore } = this.props;
        goalDetailStore.getSubGoalList({goalId:key});
        
    }

        //子任务右侧按钮
    onRightBtnClick(key, element, comsbtn,otherInfo,_tags) {
        const {goalDetailStore} = this.props;
        const {detailData} = goalDetailStore;
        if(element.type == "addgoal"){
            if(!detailData.cancreate){
                return;
            }
            goalDetailStore.setParentData({id:key,name:otherInfo.title});
            this.onAddGoal(2,'',{detailKey:key,title:otherInfo.title});
        }else if(element.type == "tag"){
            if(_tags){
                goalDetailStore.checkedIds = _tags.map((d, i) => d.id);
            }
            goalDetailStore.changeSubTagBoxVisible(true,2,key);
        }

    }

    //enter键新增目标
    onEnterGoal(e){
        let keycode = e.keyCode;
        if(keycode == 13){
            this.onAddGoal(3,e.target.value);
        }
    }

    resetUrlKey(){
        //弹框更改url上的_key值
        const { pathname, search, goalDetailStore } = this.props;
        let url = `/${pathname}${search}`;
        if (pathname == undefined || search == undefined) {
            if(location.href.indexOf("/main/workrelate/goal/goalDetail")>-1){
                url = "/main/workrelate/goal/goalDetail?id="+goalDetailStore.detailKey;
            }else{
                url = "/main/workrelate/goal/goalIndex";
            }
        }
        this.context.router.push({
            pathname: url
        });
   }

    //查看下级目标详情
    onNodeClick = (key) => {
        if (key && key != '') {
            const {goalCommonStore} = this.props;
            goalCommonStore.setIsFocusFeedBack(false) //点击详情取消反馈聚焦
            if(typeof this.props.renderDetail === "function" ){
                this.props.renderDetail(key);
            }
        }
    }

    //新建页面的按钮
    getButton = (ecId)=>{
        let buttonsCreate = [
            (<Button ecId={`${ecId}_Button@g4l66p@$subsave`} type="primary" onClick={this.doSubmit}>{getLabel(86,'保存')}</Button>),
            (<Button ecId={`${ecId}_Button@jnsjah@subclose`} type="ghost" onClick={this.onlyClose}>{getLabel(309,'关闭')}</Button>)
        ];
        return buttonsCreate;
    }

    //新建目标
    doSubmit =()=>{
        this.refs.addgoalref.wrappedInstance.doNewSave();
    }

    //新建dialog框关闭
    onlyClose = (optparams)=>{
        const { goalCommonStore } = this.props;
        const { setCreatevisable } = goalCommonStore
        if(optparams){
            if(optparams.type == 1 && typeof this.props.closeSlider === 'function'){
                this.props.closeSlider(optparams);
            }else{
                setCreatevisable(false)
            }
        }else{
            setCreatevisable(false)
        }
    }

    //全选
    checkAll(v){
        const { goalDetailStore,goalDetailStore:{subGoalList,dropSelectedKey}} = this.props;
        Util.setDataCheckBoxValue(subGoalList,v,'',4,dropSelectedKey);
        goalDetailStore.allCheckBoxVal = v;
        goalDetailStore.subGoalList = subGoalList;
        goalDetailStore.setDropDisplay(Util.isSelectCheckBox(subGoalList,v),true);
    }
    treeOtherClick(key,_v,type,_element){
        const { goalDetailStore } = this.props;
        if(type=='deltag'){
            let _this = this;
            goalDetailStore.editGoalField({fieldvalue:_v,fieldname:"tag",goalId:key,tagtype:"1",doback:function(){
                // message.success(getLabel(83472,'删除成功!'), 2);
                _this.props.doCallBack('tag',_element.tags,key);
            }});
        }else if(type=='checkbox'){
            let isSelect = Util.isSelectCheckBox(goalDetailStore.subGoalList,_v);
            let isallselect = Util.isAllSelectCheckBox(goalDetailStore.subGoalList,"0");//是否全选
            goalDetailStore.setDropDisplay(isSelect,isallselect);
        }
    }


    render(){
        const {goalDetailStore,goalCommonStore,sortcond} = this.props;
        const {optparams,loading,detailData,subGoalList,localtime,parentData,dropSelectedKey,allCheckBoxVal,isOrgGoal} = goalDetailStore;
        const {createvisable} = goalCommonStore;
        const {goalName} = this.state; 
        return(
            <div>
                <div className="subGoal">
                    {/* <div className="subGoal-title"> */}
                        {/* <span className="subGoal-title-left">
                            <span><Icon type="folder" /><span className="subGoal-title-left-font">{getLabel(508864,'下级目标')}</span><Icon type="right" /></span>
                        </span> */}
                        {/* {detailData.cancreate &&<span className="subGoal-title-right">
                            <Button  type="ghost" onClick={() => this.onAddGoal(1)} >
                                <Icon type="plus" />{getLabel(508560,'新建下级目标')}
                            </Button></span> 
                            } */}
                        
                    {/* </div> */}
                    {!detailData.cancreate && subGoalList && subGoalList.length <= 0 && Util.renderAlertPage(getLabel(83553, "暂无数据"),"","",window.innerHeight-150,this.props.ecId || '')}
                    <div className="subGoal-list">
                        {detailData.cancreate && <div className="subGoal-checkboxall"><WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@xk58th`} content={getLabel(556,'全选')} value={allCheckBoxVal} onChange={(v)=>this.checkAll(v)}/></div>}
                        <ViewTree ecId={`${this && this.props && this.props.ecId || ''}_ViewTree@pfxe2j`} datas={subGoalList}  params={toJS(optparams)}   onTreeNodeClick={(key) => this.onNodeClick(key)} locationkey={localtime}
                                onIconClick={(key) => this.onIconClick(key)} onRightBtnClick={(key, element, comsbtn,otherInfo,_tags) => this.onRightBtnClick(key, element, comsbtn,otherInfo,_tags)} 
                                onOtherClick={(key,_v,_type,_element)=>this.treeOtherClick(key,_v,_type,_element)} boxProp={dropSelectedKey}/>
                    </div>
                </div>
                {detailData.cancreate && <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9xurzh`}>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@uuuqmj`} className = "add-intext"
                        value = {goalName}
                        placeholder={getLabel(508759,'快速新建目标')}
                        onBlur={(value)=> this.onAddGoal(3,value)}
                        onPressEnter={(e)=>this.onEnterGoal(e)}
                        ref = 'quickCreateGoal'
                    />
                </Row>}
                {<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@vjnx6e`} visible={createvisable} title={getLabel(508587,'新建目标')} icon="icon-coms-Add-to" iconBgcolor="#7734FF"
                    buttons={this.getButton(this.props.ecId || '')}
                    style={{width:window.innerWidth*0.7,height:window.innerHeight-90}} closable={true}
                    onCancel={this.onlyClose}>
                    {createvisable && <GoalAdd ecId={`${this && this.props && this.props.ecId || ''}_GoalAdd@pzpzf9`} addType={'detailAdd'} isDialog={true} height={window.innerHeight-200} ref="addgoalref" principaler={{id:detailData.userid,name:detailData.username}} sortcond = {sortcond}  parentData={[parentData]} onAddSuccess={(arry,data)=>this.onCallBackSuccess(arry,data)} doClose={(optparams) => this.onlyClose(optparams)} locationKey={new Date().getTime()} isOrgGoal={isOrgGoal} />} 
                </WeaDialog>}
            </div>
        )
    }
}